{% extends 'base.html' %}
{% block title %}用户注册{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">新用户注册</h4>
            </div>
            <div class="card-body">
                <!-- 错误提示 -->
                {% if error %}
                    <div class="alert alert-danger">{{ error }}</div>
                {% endif %}
                <!-- 成功提示 -->
                {% if success %}
                    <div class="alert alert-success">{{ success }}</div>
                {% endif %}

                <form class="needs-validation" novalidate method="post" action="{% url 'user_register' %}">
                    {% csrf_token %}

                    <!-- 用户名：4-20位字母/数字 -->
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required
                               pattern="^[a-zA-Z0-9]{4,20}$"
                               title="用户名只能包含字母、数字，长度为4-20个字符">
                        <div class="invalid-feedback">
                            用户名格式不正确（4-20位字母或数字）
                        </div>
                    </div>

                    <!-- 密码：6-20位，必须包含字母和数字 -->
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required
                               pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$"
                               title="密码必须包含字母和数字，长度为6-20个字符">
                        <div class="invalid-feedback">
                            密码格式不正确（需包含字母和数字，6-20位）
                        </div>
                    </div>

                    <!-- 确认密码：与密码一致 -->
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">确认密码</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        <div class="invalid-feedback">
                            两次输入的密码不一致
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 mt-4">立即注册</button>

                    <div class="text-center mt-3">
                        <span>已有账号？</span>
                        <a href="{% url 'user_login' %}" class="text-primary">立即登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form.needs-validation');

    form.addEventListener('submit', function(event) {
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm_password').value;

        // 检查密码一致性
        if (password !== confirmPassword) {
            document.getElementById('confirm_password').setCustomValidity('两次输入的密码不一致');
        } else {
            document.getElementById('confirm_password').setCustomValidity('');
        }

        // 触发Bootstrap验证
        if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
        }
        form.classList.add('was-validated');
    });
});
</script>
{% endblock %}